<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
ul{margin: 0; padding: 0; list-style: none;}
li{width: 100px; height: 100px; background-color: red; position: absolute;top: 40px;}
</style>
<script type="text/javascript">
window.onload = function (){
	var aLi = document.getElementsByTagName('li');

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.left =40 + i*120+'px';
	
		aLi[i].onmouseover = function (){
			var that = this;					//必须要把this赋值出来
			shake(that,'left', function(){
				shake(that, 'top')
			});
		}
	}
}

function getStyle( obj , attr ){
	return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
}

function shake( obj, attr, endFn ){
	if (obj.finished) { return };
	obj.finished = true;
	var arr = [];
	var num = 0;
	var pos = parseInt( getStyle( obj,attr ) );

	for (var i = 20; i > 0; i-=2) {
		arr.push(i,-i);
	};
	arr.push(0);

	clearInterval( obj.shake )
	obj.shake = setInterval( function (){
		obj.style[attr] = pos + arr[num] + 'px';
		num ++;
		if (num == arr.length) {
			clearInterval(obj.shake);
			obj.finished = false;
			endFn && endFn();
		};
	},50)

	
}
</script>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>